<template>
	<view>
		<u-popup v-model="show" mode="bottom" border-radius="40">
			<view class="po_title">
				<image @tap.stop="show=false" :src='STATIC_URL+"30.png"' mode="aspectFill"></image>
			</view>
			<view class="shop_info flex">
				<view class="item_left_img">
					<u-lazy-load :image="shopItem.image" img-mode="aspectFill" height="180"
						border-radius="8"></u-lazy-load>
				</view>
				<view class="item_right">
					<view class="shop_name">{{shopItem.name}}</view>
					<view class="specification" v-if="shopItem.specification">规格：{{shopItem.specification}}</view>
					<view class="shop_price flex align-center justify-between">
						<view class="price_text">
							<template v-if="user.is_show_price == 1">
								<text class="price_1">￥</text>
								<text class="price_2">{{shopItem.price}}</text>
								<text class="price_3">/{{filterDictionary(shopItem.unit)}}</text>
							</template>
							<template v-else>
								<text class="price_3">单位：{{filterDictionary(shopItem.unit)}}</text>
							</template>
						</view>
						<view class="shop_num flex align-center justify-end">
							<image :src='STATIC_URL+"19.png"' mode="aspectFill" @tap.stop="countPre"></image>
							<input class="shop_num_input" type="text" v-model="shopCount" placeholder="1" placeholder-style="font-size=26rpx;" >
							<!-- <view class="shop_num_input" @tap.stop="openKeyboard">{{shopCount}}</view> -->
							<image :src='STATIC_URL+"20.png"' mode="aspectFill" @tap.stop="countNext"></image>
						</view>
					</view>
				</view>
			</view>
			<view class="notes_info flex align-center">
				<view class="notes_info_1">备注：</view>
				<input class="notes_info_2" v-model="remarks" type="text" placeholder="请输入备注信息" placeholder-style="font-size: 28rpx;color: #999;">
			</view>
			<view class="add_btn flex align-center justify-center" @tap.stop="addCart" v-if="source == 1">加入购物袋</view>
			<view class="add_btn flex align-center justify-center" @tap.stop="addCart" v-if="source == 2">保存</view>
		</u-popup>

		<u-keyboard mode="number" @change="valChange" @backspace="backspace" v-model="keyboard_show"></u-keyboard>
	</view>
</template>

<script>
	export default {
		props: ['item', 'source'],
		data() {
			return {
				show: false,
				keyboard_show: false,
				image: "",
				shopItem: "",
				user: {},
				shopCount: 1,
				keyboard_value: 0,
				remarks: "", // 备注
			}
		},
		created() {
			
		},
		watch: {
			item(newValue) {
				let value = JSON.stringify(newValue);
				this.shopItem = JSON.parse(value);
				// console.log(this.shopItem);
				if (this.shopItem.count > 0) {
					this.shopCount = this.shopItem.count;
				} else {
					this.shopCount = 1;
				}
				if (this.source == 2) {
					this.remarks = this.shopItem.remark;
				} else {
					this.remarks = "";
				}
				this.user = global.userInfo;
			}
		},
		methods: {
			openCart() {
				this.show = true;
			},
			countPre() {
				if (this.shopCount == 0) {
					return;
				}
				this.shopCount = Number(this.shopCount) - 1;
			},
			countNext() {
				this.shopCount = Number(this.shopCount) + 1;
			},
			// 添加购物车
			addCart() {
				if (isNaN(Number(this.shopCount))) {
					this.$message.info('请输入正确的商品数量');
					return;
				}
				if (this.shopCount == 0) {
					this.$message.info('请输入商品数量');
					return;
				}
				if (this.shopCount < 0) {
					this.$message.info('商品数量必须大于0');
					return;
				}
				// this.shopItem.remarks = "";
				this.shopItem.count = this.shopCount;
				// this.$store.commit('init', this.shopItem);
				// this.show = false;
				// if (this.source == 1) {
				// 	this.$message.info('加入成功');
				// } else {
				// 	this.$message.info('修改成功');
				// }
				this.$api.post(global.apiUrls.gylAddCars, {
					product_id: this.source == 1 ? this.shopItem.id : this.shopItem.product_id,
					business_id: this.shopItem.business_id,
					count: this.shopItem.count,
					remark: this.remarks
				}).then(res => {
					this.$message.info(res.data.message);
					if (res.data.code == 200) {
						this.show = false;
						this.shopItem.remark = this.remarks;
						this.remarks = "";
						this.$emit('changeShop', this.shopItem);
					}
				})
			},
			openKeyboard() {
				this.keyboard_show = true;
			},
		}
	}
</script>

<style lang="scss" scoped>
	.po_title {
		display: flex;
		justify-content: flex-end;

		image {
			width: 84rpx;
			height: 84rpx;
		}
	}

	.shop_info {
		padding: 0 40rpx 24rpx;

		.item_left_img {
			width: 180rpx;
			height: 180rpx;
		}

		/deep/.u-lazy-item {
			width: 180rpx !important;
			height: 180rpx !important;
		}

		.item_right {
			width: calc(100% - 180rpx);
			padding: 0 0 0 30rpx;

			.shop_name {
				font-weight: 500;
				font-size: 32rpx;
				color: #3D3D3D;
				text-overflow: ellipsis;
				overflow: hidden;
				white-space: nowrap;
			}

			.specification {
				margin-top: 16rpx;
				color: #999;
				font-size: 26rpx;
			}

			.shop_price {
				margin-top: 32rpx;

				.price_text {
					.price_1 {
						color: #D43C3B;
						font-size: 24rpx;
						font-weight: 600;
					}

					.price_2 {
						color: #D43C3B;
						font-size: 40rpx;
						font-weight: 600;
					}

					.price_3 {
						color: #989898;
						font-size: 24rpx;
						font-weight: 500;
					}
				}

				.shop_num {
					image {
						width: 60rpx;
						height: 40rpx;
					}

					.shop_num_input {
						text-align: center;
						// padding: 0 24rpx;
						width: 80rpx;
						font-weight: 400;
						font-size: 26rpx;
						color: #3D3D3D;
					}
				}
			}
		}
	}
	.notes_info {
		margin: 0 40rpx;
		.notes_info_1 {
			font-size: 28rpx;
		}
		.notes_info_2 {
			height: 58rpx;
			padding: 0 16rpx;
			font-size: 26rpx;
			flex: 1;
			background: #eee;
			border-radius: 8rpx;
		}
	}

	.add_btn {
		width: 700rpx;
		height: 80rpx;
		background: #41AF36;
		border-radius: 50rpx;
		margin: 24rpx 25rpx 48rpx;
		font-weight: 500;
		font-size: 30rpx;
		color: #FFFFFF;
	}
</style>